<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<!--希望遍历data中一个对象的每个属性，反复生成多个相同结构的HTML元素-->
			<ul>
				<li v-for="(value,key) of goods" :key="key">{{key}} : {{value}}</li>
			</ul>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						goods: {
							id: 11,
							name: "华为手机",
							title: "2022新款 爆销售202220222022",
							price: 12.78,
						}
					}
				},
			}).mount("#app");
		</script>
	</body>

</html>
